
import React, { useEffect,useState} from 'react'
import { connect ,useDispatch,useSelector} from 'react-redux'
import {Dispatch,bindActionCreators} from "redux"
import { ALLSTATE ,ALLLIST} from '../../../types/home.d'
import * as action from "../../../store/action"
import request from "../../../request/request"
import "../../../api/home"
import "../../../style/home.scss"
import { Search } from 'react-vant';
interface MYPROPS {
  setlist:(params:Array<ALLLIST>)=>void;
  arr:any,
  SSearch:(params:string)=>void
}
function HomeIndex(props:MYPROPS) {
  let hookDispatch=useDispatch()
  const [value, setValue] = useState('');
  useEffect(()=>{
     request.get("/list").then(res=>{
       props.setlist(res.data.list)
      /* hookDispatch({
        type:"setlist",
        payload:res.data.list
      }) */
     })
   
     
  },[])
const newarr=useSelector((state:any)=>{
  return state.arr
})
function search(){
  console.log(value);
  props.SSearch(value)
  
}


  return (
    <div className="home">
       {
        window.localStorage.getItem("token")?"已登录":"未登录" 
       }
  <div className="header">
  <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" />
  <button onClick={()=>search()}>搜索</button>
  </div>

      <div className="box">
      {
        newarr&&newarr.map((item:ALLLIST,index:number)=>{
         return <div className='info' key={index}>
                 <img src={item.img} alt="" />
                 <h4>{item.name}</h4>
           </div>
        })
      }
      </div>
      
    </div>
  )
}

const mapStateToProps = (state:ALLSTATE) => ({
 newarr: state.arr
})

const mapDispatchToProps = (dispatch:Dispatch)=>{
      return {...bindActionCreators(action,dispatch)}
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeIndex)


